<template>
  <!-- 插槽使用 -->
  <button @click="componentName='SlotUse'">插槽使用</button>

  <!-- 插槽传参 -->
  <button @click="componentName='SlotProps'">插槽传参</button>

  <component :is="componentName"/>
</template>

<script>

import {defineComponent} from 'vue';
import SlotUse from '@/components/slot-use/SlotUse.vue';
import SlotProps from '@/components/slot-params/SlotProps.vue';

export default defineComponent({
  components: {SlotProps, SlotUse},
  data() {
    return {
      componentName: ''
    };
  }
});
</script>

<style scoped>
button {
  margin-right: 10px;
  margin-bottom: 20px;
}
</style>
